<template>
  <div id="ShopCar">
    <app-header :name="name"></app-header>
    <div id="mycont" v-if="reg">
      <div class="compile">
        <span>编辑商品</span>
      </div>
      <ul class="myMenu">
        <li class="myList" v-for="(item, index) in data" :key="index">
          <div class="but" :class="{active:item.actives}" @click="btn(index)"></div>
          <img :src="item.img" alt="" srcset="">
          <ul class="listText">
            <li>{{item.detail.title}}</li>
            <li>
              <div>
                <span v-for="(select, index) in item.detail.select.select" :key="index">{{select}}</span>
              </div>
              <div>选服务<span>></span></div>
            </li>
            <li>
              <span v-for="(discounts, index) in item.detail.discounts.discounts" :key="index">{{discounts.neck}}</span>
            </li>
            <li>
              <div>
                ￥
                <span>{{item.price}}</span>
              </div>
              <div>
                <button @click="increase(index)">-</button>
                <span>{{item.detail.select.number.number}}</span>
                <button @click="decrease(index)">+</button>
              </div>
            </li>
            <li>
              <span @click="out(index)">删除</span>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <router-link to="/Register" class="goreg" v-else>去登录</router-link>
    <div id="footer_car">
      <ul>
        <li>
          <div class="but"></div>
        </li>
        <li>全选</li>
      </ul>
      <div class="right_price">
        <div>
          总价 :
          <span>￥{{price}}</span>
        </div>
        <div>
          <button @click="knot()" :class="{actives:activess}">去结算({{number}}件)</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Common/Header'
import { Toast } from 'mint-ui'

export default {
  name: 'ShopCar',
  components: {
    'app-header': Header
  },
  data () {
    return {
      reg: false,
      name: '购物车',
      data: '',
      price: 0,
      number: 0,
      activess: false,
      index: 0,
      myurl: '/ShopCar/Buy'
    }
  },
  mounted () {
    this.getdata()
  },
  methods: {
    getdata () {
      this.data = JSON.parse(localStorage.getItem('dataList'))
      if (JSON.parse(localStorage.getItem('user'))) {
        this.reg = true
      } else {
        this.reg = false
      }
      if (JSON.parse(localStorage.getItem('dataListPrice'))) {
        this.price = JSON.parse(localStorage.getItem('dataListPrice'))
      }
      if (JSON.parse(localStorage.getItem('dataListNumber'))) {
        this.number = JSON.parse(localStorage.getItem('dataListNumber'))
      }
      if (this.number > 0) {
        this.activess = true
      } else {
        this.activess = false
      }
    },
    btn (index) {
      this.data[index].actives = !this.data[index].actives
      if (this.data[index].actives === true) {
        this.price += this.data[index].price * this.data[index].detail.select.number.number
        this.number += this.data[index].detail.select.number.number
        this.index = index
      }
      if (this.data[index].actives === false) {
        this.price -= this.data[index].price * this.data[index].detail.select.number.number
        this.number -= this.data[index].detail.select.number.number
      }
      if (this.number > 0) {
        this.activess = true
      } else {
        this.activess = false
      }
    },
    out (index) {
      if (this.data[index].actives === true) {
        this.price -= this.data[index].price * this.data[index].detail.select.number.number
        this.number -= this.data[index].detail.select.number.number
      }
      this.data.splice(index, 1)
      localStorage.setItem('dataList', JSON.stringify(this.data))
      localStorage.setItem('dataListPrice', JSON.stringify(this.price))
      localStorage.setItem('dataListNumber', JSON.stringify(this.number))
      if (this.number > 0) {
        this.activess = true
      } else {
        this.activess = false
      }
    },
    knot () {
      if (this.data[this.index].actives === true) {
        this.price -= this.data[this.index].price * this.data[this.index].detail.select.number.number
        this.number -= this.data[this.index].detail.select.number.number
        localStorage.setItem('buy', JSON.stringify(this.data[this.index]))
        this.data.splice(this.index, 1)
        localStorage.setItem('dataList', JSON.stringify(this.data))
        localStorage.setItem('dataListPrice', JSON.stringify(this.price))
        localStorage.setItem('dataListNumber', JSON.stringify(this.number))
        this.$router.push({ path: this.myurl })
      }
      if (this.number > 0) {
        this.activess = true
      } else {
        this.activess = false
      }
    },
    increase (index) {
      if (this.data[index].detail.select.number.number <= 1) {
        Toast({
          message: '最少一件哦',
          duration: 3000
        })
      } else {
        if (this.data[index].actives === false) {
          this.price += this.data[index].price * (this.data[index].detail.select.number.number - 1)
          this.number += (this.data[index].detail.select.number.number--)
          this.number--
          this.data[index].actives = true
        } else {
          this.data[index].detail.select.number.number--
          this.number--
          this.price -= this.data[index].price
        }
        if (this.number > 0) {
          this.activess = true
        } else {
          this.activess = false
        }
      }
    },
    decrease (index) {
      if (this.data[index].actives === false) {
        this.price += this.data[index].price * this.data[index].detail.select.number.number
        this.number += this.data[index].detail.select.number.number
      }
      this.activess = true
      this.data[index].actives = true
      this.data[index].detail.select.number.number++
      this.price += this.data[index].price
      this.number++
    }
  }
}
</script>

<style scoped lang="less">
#ShopCar {
  #mycont {
    .compile {
      display: flex;
      flex-direction: row-reverse;
      span {
        padding: 20px;
      }
    }
    .myMenu {
      .myList {
        background: rgba(255, 255, 255, 1);
        margin: 0 0 15px 0;
        display: flex;
        padding: 25px;
        .but {
          min-width: 30px; /*px*/
          height: 30px; /*px*/
          border-radius: 50%;
          border: 1px solid rgba(155, 155, 155, 1);
          margin: 100px 25px 0 0;
        }
        img {
          width: 200px; /*px*/
          height: 220px; /*px*/
          margin: 0 15px;
        }
        .listText {
          li {
            margin: 10px 0; /*PX*/
          }
          li:nth-of-type(1) {
            line-height: 34px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            padding: 0;
            font-size: 28px; /*px*/
          }
          li:nth-of-type(2) {
            font-size: 24px; /*px*/
            line-height: 30px;
            display: flex;
            div:nth-of-type(1) {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 1;
              overflow: hidden;
              background: rgba(225, 225, 225, 1);
              padding: 0 10px;
            }
            div:nth-of-type(2) {
              padding: 0 5px;
              min-width: 120px;
              text-align: center;
              margin: 0 0 0 15px;
              background: rgba(225, 225, 225, 1);
              span {
                padding: 0 0 0 5px;
              }
            }
          }
          li:nth-of-type(3) {
            color: rgba(255, 0, 0, 1);
            span {
              margin: 0 15px 0 0;
            }
          }
          li:nth-of-type(4) {
            display: flex;
            justify-content: space-between;
            div:first-child {
              color: rgba(255, 0, 0, 1);
              span {
                font-size: 40px; /*px*/
              }
            }
            div:last-child {
              span,
              button {
                vertical-align: middle;
              }
            }
          }
          li:nth-of-type(5) {
            display: flex;
            flex-direction: row-reverse;
          }
        }
      }
    }
  }
  .goreg {
    padding: 15px 25px;
    background: rgba(255, 0, 0, 1);
    color: rgba(255, 255, 255, 1);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #footer_car {
    font-size: 32px; /*px*/
    height: 100px; /*px*/
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    ul {
      padding: 0 15px; /*px*/
      li {
        display: flex;
        justify-content: center;
        .but {
          width: 30px; /*px*/
          height: 30px; /*px*/
          border-radius: 50%;
          border: 1px solid rgba(155, 155, 155, 1);
        }
      }
    }
    .right_price {
      display: flex;
      align-items: center;
      font-weight: 700;
      span {
        color: rgba(255, 0, 0, 1);
        padding: 0 15px 0 0;
      }
      button {
        height: 120px; /*px*/
        font-size: 32px; /*px*/
        padding: 0 35px;
      }
    }
  }
}
.active {
  background: rgba(255, 0, 0, 1);
}
.actives {
  background: rgba(255, 0, 0, 1);
  color: rgba(255, 255, 255, 1);
}
</style>
